'use client'

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { BookOpen, Search, Filter, Plus, Edit, Trash2, ArrowLeft } from 'lucide-react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { ALL_TOPICS, DIFFICULTY_LABELS, GRADE_LABELS } from '@/data/topics-index'

export default function TopicsManagement() {
  const [topics, setTopics] = useState(ALL_TOPICS)
  const [searchQuery, setSearchQuery] = useState('')
  const [filterCategory, setFilterCategory] = useState('all')
  const [filterDifficulty, setFilterDifficulty] = useState('all')

  // 获取所有分类
  const categories = Array.from(new Set(ALL_TOPICS.map(t => t.category)))

  // 过滤题型
  const filteredTopics = topics.filter(topic => {
    const matchSearch = topic.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                       topic.description.toLowerCase().includes(searchQuery.toLowerCase())
    const matchCategory = filterCategory === 'all' || topic.category === filterCategory
    const matchDifficulty = filterDifficulty === 'all' || topic.difficulty === Number(filterDifficulty)
    
    return matchSearch && matchCategory && matchDifficulty
  })

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
      {/* 导航栏 */}
      <nav className="glassmorphism border-b border-white/20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center space-x-4">
              <Link href="/admin">
                <Button variant="ghost" size="sm">
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  返回管理面板
                </Button>
              </Link>
              <div className="flex items-center space-x-2">
                <BookOpen className="w-6 h-6 text-indigo-600" />
                <span className="text-xl font-bold text-gray-800">知识点管理</span>
              </div>
            </div>
          </div>
        </div>
      </nav>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 页面标题 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="mb-8"
        >
          <h1 className="text-3xl font-bold text-gray-800 mb-2">知识点管理</h1>
          <p className="text-gray-600">管理所有奥数知识点和题型</p>
        </motion.div>

        {/* 统计卡片 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"
        >
          <Card className="glassmorphism">
            <CardHeader className="pb-3">
              <CardDescription>总知识点数</CardDescription>
              <CardTitle className="text-3xl text-indigo-600">{ALL_TOPICS.length}</CardTitle>
            </CardHeader>
          </Card>
          <Card className="glassmorphism">
            <CardHeader className="pb-3">
              <CardDescription>小学知识点</CardDescription>
              <CardTitle className="text-3xl text-blue-600">
                {ALL_TOPICS.filter(t => t.gradeLevel.some(g => g <= 5)).length}
              </CardTitle>
            </CardHeader>
          </Card>
          <Card className="glassmorphism">
            <CardHeader className="pb-3">
              <CardDescription>初中知识点</CardDescription>
              <CardTitle className="text-3xl text-purple-600">
                {ALL_TOPICS.filter(t => t.gradeLevel.some(g => g >= 6)).length}
              </CardTitle>
            </CardHeader>
          </Card>
          <Card className="glassmorphism">
            <CardHeader className="pb-3">
              <CardDescription>分类数量</CardDescription>
              <CardTitle className="text-3xl text-green-600">{categories.length}</CardTitle>
            </CardHeader>
          </Card>
        </motion.div>

        {/* 搜索和筛选 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="glassmorphism p-6 rounded-2xl mb-8"
        >
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="md:col-span-2">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                <input
                  type="text"
                  placeholder="搜索知识点..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                />
              </div>
            </div>
            <div>
              <select
                value={filterCategory}
                onChange={(e) => setFilterCategory(e.target.value)}
                className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
              >
                <option value="all">所有分类</option>
                {categories.map(cat => (
                  <option key={cat} value={cat}>{cat}</option>
                ))}
              </select>
            </div>
            <div>
              <select
                value={filterDifficulty}
                onChange={(e) => setFilterDifficulty(e.target.value)}
                className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
              >
                <option value="all">所有难度</option>
                {Object.entries(DIFFICULTY_LABELS).map(([level, label]) => (
                  <option key={level} value={level}>{label}</option>
                ))}
              </select>
            </div>
          </div>
        </motion.div>

        {/* 知识点列表 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="space-y-4"
        >
          <div className="flex items-center justify-between mb-4">
            <p className="text-gray-600">
              找到 <span className="font-bold text-indigo-600">{filteredTopics.length}</span> 个知识点
            </p>
          </div>

          {filteredTopics.map((topic, index) => (
            <motion.div
              key={topic.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.05 }}
            >
              <Card className="glassmorphism hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                          {topic.category}
                        </span>
                        <span className="px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                          {DIFFICULTY_LABELS[topic.difficulty as keyof typeof DIFFICULTY_LABELS]}
                        </span>
                        <span className="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                          {topic.gradeLevel.map(g => GRADE_LABELS[g as keyof typeof GRADE_LABELS]).join(', ')}
                        </span>
                      </div>
                      <CardTitle className="text-lg text-gray-800">{topic.name}</CardTitle>
                      <CardDescription className="mt-2">{topic.description}</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <div>
                      <p className="text-sm font-medium text-gray-700 mb-1">关键知识点：</p>
                      <div className="flex flex-wrap gap-2">
                        {topic.keyPoints.map((point, i) => (
                          <span key={i} className="text-xs px-2 py-1 bg-gray-100 rounded">
                            {point}
                          </span>
                        ))}
                      </div>
                    </div>
                    {topic.prerequisites && topic.prerequisites.length > 0 && (
                      <div>
                        <p className="text-sm font-medium text-gray-700">
                          前置知识点：{topic.prerequisites.length}个
                        </p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}

          {filteredTopics.length === 0 && (
            <div className="text-center py-12">
              <BookOpen className="w-16 h-16 text-gray-400 mx-auto mb-4" />
              <p className="text-gray-600">没有找到匹配的知识点</p>
            </div>
          )}
        </motion.div>
      </div>
    </div>
  )
}

